<template>
  <div class="create-activity-wrapper">
    <div class="create-activity">
      <div class="show-area">
        <mobile-preview v-model="form"></mobile-preview>
      </div>
      <div class="operate-area">
        <div class="directory-area" ref="directoryArea">
          <div class="one-directory-area bgimage-position directory-area-item selected" data-areaindex="0"
               @click="selected('0')">
            <div class="directory-title">基础样式配资</div>
          </div>
          <div class="two-directory-area bgimage-position directory-area-item" data-areaindex="1"
               @click="selected('1')">
            <div class="directory-title">拼团商品配置</div>
          </div>
          <div class="three-directory-area bgimage-position directory-area-item" data-areaindex="2"
               @click="selected('2')">
            <div class="directory-title">开启分销</div>
          </div>
          <div class="four-directory-area bgimage-position directory-area-item" data-areaindex="3"
               @click="selected('3')">
            <div class="directory-title">邀请奖励配置</div>
          </div>
          <div class="five-directory-area bgimage-position directory-area-item" data-areaindex="4"
               @click="selected('4')">
            <div class="directory-title">活动/机构介绍</div>
          </div>
          <div class="six-directory-area bgimage-position directory-area-item" data-areaindex="5"
               @click="selected('5')">
            <div class="directory-title">门店/客服信息</div>
          </div>
          <div class="seven-directory-area bgimage-position directory-area-item" data-areaindex="6"
               @click="selected('6')">
            <div class="directory-title">报名表单收集</div>
          </div>
          <div class="eight-directory-area bgimage-position directory-area-item" data-areaindex="7"
               @click="selected('7')">
            <div class="directory-title">分享设置</div>
          </div>
        </div>
        <div class="function-area">
          <div class="activity-scroll-wrapper" ref="activityScroll">
            <div class="activity-scroll">
              <div class="activity-config">
                <BaseConfig id="one" :base_style_config="form.base_style_config"
                            @reset-bg-color="resetBgColor"
                            @reset-create-order-before="resetCreateOrderBefore"
                            @reset-create-order-after="resetCreateOrderAfter"
                />
              </div>
              <div class="activity-config">
                <PintuanGoodsConfig id="two" :pintuan_goods_config="form.pintuan_goods_config"
                                    @remove-goods-item="removeGoodsItem"
                                    @add-goods-item="addGoodsItem"/>
              </div>
              <div class="activity-config">
                <DistributionConfig id="three" :open_distribution_config="form.open_distribution_config"
                                    @edit-distribution-rule="editDistributionRule"/>
              </div>
              <div class="activity-config">
                <InviteRewardConfig id="four" :invite_reward_config="form.invite_reward_config"
                                    @remove-prezzie-item="removePrezzieItem"
                                    @add-prezzie-item="addPrezzieItem"
                                    @edit-reward-rule="editRewardRule"/>
              </div>
              <div class="activity-config">
                <ActivityDetailContentConfig id="five" v-model="form.activity_and_agency_introduce_config"
                                             ref="activityDetail"/>
              </div>
              <div class="activity-config">
                <MendianCustomerServerConfig id="six" :mendian_customer_server_info="form.mendian_customer_server_info"
                                             @remove-mendian-item="removeMendianItem"
                                             @add-mendian-item="addMendianItem"
                                             @add-mendian-contact-mobile-item="addMendianContactMobileItem"
                                             @remove-mendian-contact-mobile-item="removeMendianContactMobileItem"/>
              </div>
              <div class="activity-config">
                <EnrollInfoCollect id="seven" :enroll_info_collect="form.enroll_info_collect"
                                   @input-edit-item="inputEditItem"
                                   @radio-edit-item="radioEditItem"
                                   @select-edit-item="selectEditItem"
                                   @add-item="addItem"
                                   @remove-collect-item="removeCollectItem"
                                   @add-item-child="addItemChild"
                                   @remove-item-child="removeItemChild"/>
              </div>
              <div class="activity-config">
                <ShareConfig id="eight" :share_config="form.share_config"/>
              </div>
            </div>
          </div>
          <div class="activity-bottom">
            <div class="activity-bottom-left">
              <el-button class="left-button" size="medium" @click="cancel">取消</el-button>
            </div>
            <div class="activity-bottom-center">
              <el-button class="center-button" type="primary" size="medium" @click="save(1)">保存草稿</el-button>
            </div>
            <div class="activity-bottom-right">
              <el-button class="right-button" type="primary" size="medium" @click="save(0)">保存</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BaseConfig from './components/BaseConfig'
import PintuanGoodsConfig from './components/PintuanGoodsConfig'
import DistributionConfig from './components/DistributionConfig'
import InviteRewardConfig from './components/InviteRewardConfig'
import MendianCustomerServerConfig from './components/MendianCustomerServerConfig'
import EnrollInfoCollect from './components/EnrollInfoCollect'
import ShareConfig from './components/ShareConfig'
import ActivityDetailContentConfig from './components/ActivityDetailContentConfig'
import MobilePreview from './mobilePreview'
import { saveActivity,infoById,editActivity } from "@/api/triones/activity";
import moment from 'moment';
export default {
  name: "createActivity",
  components: {
    BaseConfig,
    PintuanGoodsConfig,
    DistributionConfig,
    InviteRewardConfig,
    MendianCustomerServerConfig,
    EnrollInfoCollect,
    ShareConfig,
    ActivityDetailContentConfig,
    MobilePreview,
  },
  data() {
    return {
      base_style_config_custom: false,
      form: {
        base_style_config: {
          head_image: {
            image_max_size: 5,
            show_way: '',
            images: 'https://yueshangxuan.oss-cn-chengdu.aliyuncs.com/yjj/normal/head_default.jpg'
          },
          title: {
            title: '草莓街舞，宠粉狂欢节，199最高抢20课时！！！',
            subtitle: ''
          },
          start_end_time: {
            show_way: 'countdown',
            date_format: 'yyyy-MM-dd HH:mm:ss',
            start_time: moment().subtract(1, 'days').format("YYYY-MM-DD HH:mm:ss"),
            end_time: moment().add(6, 'days').format("YYYY-MM-DD HH:mm:ss")
          },
          custom: {
            is_show_top_barrage: true,
            is_show_avatar_url: true,
            is_show_invite_rank: true,
            is_show_bottom_buy_record: true,
            bg_colour: '#00afee',
            is_show_countdown: true,
            create_order_before: '我要抢购',
            create_order_after: '继续邀请，获得豪礼奖励',
            is_show_home_side_function: true
          },
          music: {
            url: null,
            id: null
          }
        },
        pintuan_goods_config: {
          welfare_title: {
            title: '福利一：拼团课程阶梯',
            subtitle: ''
          },
          pintuan_price: 0.1,
          is_inventory: false,
          inventory_number: 9999,
          interval_goods_list: [
            {
              id: '',
              constitute_number: 1,
              welfare_name: '每人8课（45分钟-60分钟/课时）'
            },
            {
              id: '',
              constitute_number: 3,
              welfare_name: '每人16课（45分钟-60分钟/课时）'
            },
            {
              id: '',
              constitute_number: 5,
              welfare_name: '每人20课（45分钟-60分钟/课时）'
            }
          ],
          custom: {
            is_show_kaituan_list: true,
            is_optional_identity: true,
            is_auto_full_group: true,
            is_show_goods_list: true
          }
        },
        open_distribution_config: {
          is_open_distribution: true,
          distribution_rule: 'ruleA',
          one_distribution_amount: {
            min: 1,
            max: 2
          },
          two_distribution_amount: {
            min: 1,
            max: 1
          }
        },
        invite_reward_config: {
          is_open_invite: false,
          title: '福利二：邀请赠豪礼',
          compute_way: 'ruleA',
          prize_list: [
            {
              id: '',
              title: '除螨仪一台+联合超级大礼包',
              cover: 'https://yueshangxuan.oss-cn-chengdu.aliyuncs.com/yjj/normal/prize_one_default.jpg',
              price: '138',
              requirement_invite_number: 1,
              is_inventory: false,
              inventory: 0
            }
          ],
        },
        mendian_customer_server_info: {
          mendian_list: [
            {
              name: '草莓街舞',
              address: '安徽省芜湖市镜湖区左岸大润发奈思教育新天地草莓街舞',
              lat: '',
              lng: '',
              door: '草莓街舞',
              province: '',
              city: '',
              district: '',
              contact_mobile: ['19826546693']
            }],
          page_is_show_mendian_info: true,
          is_show_customer_server_qr_code: true,
          customer_server_qr_code: '',
          staff_share_is_show_qr_code: false,
          is_show_customer_server_pop_info: false,
          customer_server_pop_info: '',
          is_show_custom_mandian_avatar: false,
          custom_mandian_avatar: '',
        },
        activity_and_agency_introduce_config: {
          //显示模式 concise：简洁、富文本：rich
          show_way_type: 'concise',
          concise_content: [
            {
            type: 'text',
            content: '<p class="ql-align-center"><strong class="ql-size-large" style="color: rgb(255, 153, 0);"><em><u>尊享特权</u></em></strong></p>'
          },
            {
            type: 'image',
            content: 'https://yueshangxuan.oss-cn-chengdu.aliyuncs.com/yjj/normal/content_default_one.jpg'
          }, {
            type: 'image',
            content: 'https://yueshangxuan.oss-cn-chengdu.aliyuncs.com/yjj/normal/centent_default_two.jpg'
          }, {
            type: 'image',
            content: 'https://yueshangxuan.oss-cn-chengdu.aliyuncs.com/yjj/normal/content_default_third.jpg'
          }],
          rich_content: '<p class="ql-align-center"><strong class="ql-size-large" style="color: rgb(255, 153, 0);"><em><u>尊享特权</u></em></strong></p>'
        },
        enroll_info_collect: {
          collect_rule: [
            {
              label: '孩子姓名',
              require: true,
              type: 'input',
              // text：普通输入、number-roll：数字滚动、date-select：日期选择
              show_type: 'text'
            },
            {
              label: '手机号码',
              require: true,
              type: 'input',
              show_type: 'text'
            },
            {
              label: '校区',
              require: false,
              type: 'radio',
              is_multiple: false,
              options: [
                '校区一',
                '校区二'
              ]
            },
            {
              label: '科目',
              require: false,
              type: 'select',
              is_multiple: true,
              multiple_min: 1,
              multiple_max: 2,
              options: [
                '科目一',
                '科目二'
              ]
            }
          ]
        },
        share_config: {
          share_desc: '草莓街舞，宠粉狂欢节，199最高抢20课时！！！',
          is_share_staff: false,
          cover: 'https://yueshangxuan.oss-cn-chengdu.aliyuncs.com/yjj/normal/head_default.jpg'
        },
        // 当前tab
        isScrollNow: '0',
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.onScroll, true)
    this.$nextTick(() => {
      const scrollRef = this.$refs.activityScroll

      if (scrollRef) {
        scrollRef.scrollTop = 0
      }
    })
  },
  created() {
    window.removeEventListener('scroll', this.onScroll, false)
    if (this.$route.query.type === 'edit' || this.$route.query.type === 'copy') {
      this.getInfoById(this.$route.query.id);
    }
  },
  methods: {
    /** 目录选中-锚点 */
    selected(val) {
      // 滚动会触发onScroll
      document.getElementsByClassName('activity-config')[val].scrollIntoView({
        behavior: 'smooth',
        block: 'start',
        inline: "nearest"
      })
    },
    /** 目录选中-锚点 */
    selectedView() {
      const elements = document.querySelectorAll('.directory-area-item')
      if (elements && elements.length > 0) {
        for (let i = 0; i < elements.length; i++) {
          const el = elements[i]
          if (el.classList.contains('selected')) {
            el.classList.remove('selected')
          }
          if (el.dataset.areaindex === this.isScrollNow && !el.classList.contains('selected')) {
            el.classList.add('selected')
          }
        }
      }
    },
    // 内容部分滚动方法
    onScroll() {
      const navContents = document.querySelectorAll('.activity-config')
      const offsetTopArr = []
      navContents.forEach((item) => {
        offsetTopArr.push(item.offsetTop)
      })
      const scrollRef = this.$refs.activityScroll
      if (scrollRef) {
        const scrollTop = scrollRef.scrollTop + 240
        let navIndex = 0
        for (let n = 0; n < offsetTopArr.length; n++) {
          if (scrollTop >= offsetTopArr[n]) {
            navIndex = n
            this.isScrollNow = String(navIndex)
            // 滑动底部选中最后一个选项
            if (scrollRef.scrollHeight - scrollRef.scrollTop <= scrollRef.clientHeight + 50) {
              this.isScrollNow = String(offsetTopArr.length - 1)
            }

            this.selectedView()
          }
        }
      }
    },
    /** 移除福利商品 */
    removeGoodsItem(index) {
      var _this = this
      _this.form.pintuan_goods_config.interval_goods_list.splice(index, 1)
    },
    /** 添加福利商品 */
    addGoodsItem(index) {
      var _this = this
      let childItem = {
        id: 0,
        constitute_number: _this.form.pintuan_goods_config.interval_goods_list[_this.form.pintuan_goods_config.interval_goods_list.length - 1].constitute_number,
        welfare_name: _this.form.pintuan_goods_config.interval_goods_list[_this.form.pintuan_goods_config.interval_goods_list.length - 1].welfare_name,
      }
      _this.form.pintuan_goods_config.interval_goods_list.push(childItem)
    },
    /** 移除奖品等级 */
    removePrezzieItem(index) {
      var _this = this
      _this.form.invite_reward_config.prize_list.splice(index, 1)
    },
    /** 添加奖品等级 */
    addPrezzieItem() {
      var _this = this
      let childItem = {
        id: 0,
        title: _this.form.invite_reward_config.prize_list[_this.form.invite_reward_config.prize_list.length - 1].title,
        cover: _this.form.invite_reward_config.prize_list[_this.form.invite_reward_config.prize_list.length - 1].cover,
        price: _this.form.invite_reward_config.prize_list[_this.form.invite_reward_config.prize_list.length - 1].price,
        requirement_invite_number: _this.form.invite_reward_config.prize_list[_this.form.invite_reward_config.prize_list.length - 1].requirement_invite_number,
        is_inventory: false,
        inventory: 0
      }
      _this.form.invite_reward_config.prize_list.push(childItem)
    },
    /** 移除门店信息 */
    removeMendianItem(index) {
      var _this = this
      _this.form.mendian_customer_server_info.mendian_list.splice(index, 1)
    },
    /** 添加门店信息 */
    addMendianItem() {
      var _this = this
      let childItem = {
        name: '',
        address: '',
        lat: '',
        lng: '',
        door: '',
        province: '',
        city: '',
        district: '',
        contact_mobile: ['']
      }
      _this.form.mendian_customer_server_info.mendian_list.push(childItem)
    },
    /** 添加门店联系方式 */
    addMendianContactMobileItem(index) {
      var _this = this
      _this.form.mendian_customer_server_info.mendian_list[index].contact_mobile.push('')
    },
    /** 移除门店联系方式 */
    removeMendianContactMobileItem(index, index_mobile) {
      var _this = this
      _this.form.mendian_customer_server_info.mendian_list[index].contact_mobile.splice(index_mobile, 1)
    },
    /** 修改文本项 */
    inputEditItem(item, index) {
      var _this = this
      _this.form.enroll_info_collect.collect_rule[index] = item;
    },
    /** 修改文单选项 */
    radioEditItem(item, index) {

    },
    /** 修改多选项 */
    selectEditItem(item, index) {

    },
    /** 添加元素 */
    addItem(type) {
      var _this = this
      if (type === 'input') {
        let childItem = {
          label: '',
          require: true,
          type: 'input',
          show_type: 'text'
        }
        _this.form.enroll_info_collect.collect_rule.push(childItem)
      }
      if (type === 'radio') {
        let childItem = {
          label: '',
          require: true,
          type: 'radio',
          is_multiple: false,
          options: ['', '']
        }
        _this.form.enroll_info_collect.collect_rule.push(childItem)
      }
      if (type === 'select') {
        let childItem = {
          label: '',
          require: true,
          type: 'select',
          is_multiple: false,
          multiple_min: 1,
          multiple_max: 2,
          options: ['', '']
        }
        _this.form.enroll_info_collect.collect_rule.push(childItem)
      }
    },
    /** 移除选项框 */
    removeCollectItem(index) {
      var _this = this
      _this.form.enroll_info_collect.collect_rule.splice(index, 1)
    },
    /** 添加小选项 */
    addItemChild(index) {
      var _this = this
      _this.form.enroll_info_collect.collect_rule[index].options.push('');
    },
    /** 移除小选项 */
    removeItemChild(index, childIndex) {
      var _this = this
      _this.form.enroll_info_collect.collect_rule[index].options.splice(childIndex, 1)
    },
    save(type) {
      if (!this.form.base_style_config.head_image.images ) {
        return this.$message.error("头图不能为空");
      }
      if (!this.form.base_style_config.title.title) {
        return this.$message.error("活动标题不能为空");
      }
      if (!this.form.base_style_config.start_end_time.start_time || !this.form.base_style_config.start_end_time.end_time) {
        return this.$message.error("开始时间和结束时间不能为空");
      } else {
        let secondsDiff = moment(this.form.base_style_config.start_end_time.end_time).diff(moment(this.form.base_style_config.start_end_time.start_time), 'seconds');
        if (secondsDiff < 0) {
          return this.$message.error("结束时间不能小于开始时间");
        }
      }

      if (!this.form.pintuan_goods_config.welfare_title.title) {
        return this.$message.error("拼团福利标题不能为空");
      }
      if (!this.form.pintuan_goods_config.pintuan_price || this.form.pintuan_goods_config.pintuan_price <= 0) {
        return this.$message.error("请设置拼团价");
      }
      if (!this.form.pintuan_goods_config.is_inventory) {
        if (this.form.pintuan_goods_config.inventory_number <= 0) {
          return this.$message.error("请设置商品库存数量");
        }
      }

      const intervalGoodsList = this.form.pintuan_goods_config.interval_goods_list.some((item, index, array) => {
        return array.filter(innerItem => innerItem.welfare_name == item.welfare_name).length > 1;
      });
      if(intervalGoodsList){
        return this.$message.error("拼团商品名称不允许有相同存在");
      }

      for (const router of this.form.pintuan_goods_config.interval_goods_list) {
        if (!router.welfare_name) {
          return this.$message.error("拼团商品名称不能为空");
        }
        if (router.constitute_number <= 0) {
          return this.$message.error("成团人数不能为0");
        }
      }

      let constituteNumber = 0;
      for (let i in this.form.pintuan_goods_config.interval_goods_list) {
        if (constituteNumber >= Number(this.form.pintuan_goods_config.interval_goods_list[i].constitute_number)) {
          return this.$message.error("拼团商品成团人数应逐级增多");
        } else {
          constituteNumber = Number(this.form.pintuan_goods_config.interval_goods_list[i].constitute_number);
        }
      }

      if (this.form.open_distribution_config.is_open_distribution) {
        if (Number(this.form.open_distribution_config.one_distribution_amount.max) >= Number(this.form.pintuan_goods_config.pintuan_price) ||
            Number(this.form.open_distribution_config.one_distribution_amount.min) >= Number(this.form.pintuan_goods_config.pintuan_price) ||
            Number(this.form.open_distribution_config.two_distribution_amount.max) >= Number(this.form.pintuan_goods_config.pintuan_price) ||
            Number(this.form.open_distribution_config.two_distribution_amount.min) >= Number(this.form.pintuan_goods_config.pintuan_price)
        ) {
          return this.$message.error("分销金额不能大于拼团价格");
        }
      }
      if (!this.form.invite_reward_config.title) {
        return this.$message.error("奖励升级福利标题不能为空");
      }
      for (const router of this.form.invite_reward_config.prize_list) {
        if (!router.title) {
          return this.$message.error("奖品名称不能为空");
        }
        if (!router.price || router.price <= 0) {
          return this.$message.error("奖品价值不能小于等于0");
        }
        if (!router.requirement_invite_number || router.requirement_invite_number <= 0) {
          return this.$message.error("奖品累计邀请人数不能为0");
        }
      }

      let prize = 0;
      for (let i in this.form.invite_reward_config.prize_list) {
        if (prize >= this.form.invite_reward_config.prize_list[i].requirement_invite_number) {
          return this.$message.error("豪礼邀请人数应逐级增多");
        } else {
          prize = this.form.invite_reward_config.prize_list[i].requirement_invite_number;
        }
      }

      for (const router of this.form.mendian_customer_server_info.mendian_list) {
        if (!router.name) {
          return this.$message.error("请填写门店名称");
        }
        if (!router.address) {
          return this.$message.error("请填写门店地址");
        }
        if (!router.door) {
          return this.$message.error("请填写门店门牌号");
        }
        if (!router.contact_mobile || router.contact_mobile.length === 0) {
          return this.$message.error("请填写门店联系方式");
        }
      }
      const dto = {
        isDraft: type,
        title: this.form.base_style_config.title.title,
        cover: this.form.share_config.cover,
        startTime: this.form.base_style_config.start_end_time.start_time,
        endTime: this.form.base_style_config.start_end_time.end_time,
        content: JSON.stringify(this.form)
      }
      saveActivity(dto).then(response => {
        this.$message.success("保存成功");
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.go(-1);
      })
    },
    /** 编辑分销规则 */
    editDistributionRule(rule) {
      this.form.open_distribution_config.distribution_rule = rule;
    },
    /** 修改奖励计算方式 */
    editRewardRule(rule) {
      this.form.invite_reward_config.compute_way = rule;
    },
    /** 取消 */
    cancel() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
    },
    /** 重置颜色 */
    resetBgColor() {
      this.form.base_style_config.custom.bg_colour = '#00afee';
    },
    /** 获取详情 */
    getInfoById(id) {
      infoById(id).then(response => {
        this.form = JSON.parse(response.data.content);
      })
    },
    /** 重置下单按钮文字 */
    resetCreateOrderBefore() {
      this.form.base_style_config.custom.create_order_before = '我要抢购';
    },
    /** 重置成功下单后按钮文字 */
    resetCreateOrderAfter() {
      this.form.base_style_config.custom.create_order_after = '继续邀请，获得豪礼奖励';
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}

.create-activity-wrapper {
  width: 100%;
  height: calc(100vh - 84px);
  overflow-x: auto !important;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.create-activity {
  width: 100%;
  height: 100%;
  min-width: 1280px;
  position: relative;
  display: flex;
}

.show-area {
  height: 100%;
  width: calc(100% - 600px);
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: #f0f2f5;

  display: block;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.operate-area {
  flex: 0;
  min-width: 600px;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.directory-area {
  width: 100px;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;

  .directory-area-item {
    height: 100px;
    cursor: pointer;
    text-align: center;

    .directory-title {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.5);
      position: relative;
      top: 60px;
    }

    &.selected {
      .directory-title {
        color: #00afff;
      }
    }
  }

  .bgimage-position {
    background-size: 25% 25%;
    background-repeat: no-repeat;
    background-position: 50% 30%;
  }

  .directory-area-item:hover {
    background-color: #f6f7f9;
  }

  .one-directory-area {
    background-image: url("../../../assets/images/activity/icon_basic.png");
    &.selected {
      background-image: url("../../../assets/images/activity/icon_basic_active.png");
      .directory-title {
        color: #2254f5;
      }
    }
  }

  .two-directory-area {
    background-image: url("../../../assets/images/activity/icon_group.png");
    &.selected {
      background-image: url("../../../assets/images/activity/icon_group_active.png");
      .directory-title {
        color: #2254f5;
      }
    }
  }

  .three-directory-area {
    background-image: url("../../../assets/images/activity/icon_commission.png");
    &.selected {
      background-image: url("../../../assets/images/activity/icon_commission_active.png");
      .directory-title {
        color: #2254f5;
      }
    }
  }

  .four-directory-area {
    background-image: url("../../../assets/images/activity/icon_lottery.png");
    &.selected {
      background-image: url("../../../assets/images/activity/icon_lottery_active.png");
      .directory-title {
        color: #2254f5;
      }
    }
  }

  .five-directory-area {
    background-image: url("../../../assets/images/activity/icon_intro.png");
    &.selected {
      background-image: url("../../../assets/images/activity/icon_intro_active.png");
      .directory-title {
        color: #2254f5;
      }
    }
  }

  .six-directory-area {
    background-image: url("../../../assets/images/activity/icon_store.png");
    &.selected {
      background-image: url("../../../assets/images/activity/icon_store_active.png");
      .directory-title {
        color: #2254f5;
      }
    }
  }

  .seven-directory-area {
    background-image: url("../../../assets/images/activity/icon_form.png");
    &.selected {
      background-image: url("../../../assets/images/activity/icon_form_active.png");
      .directory-title {
        color: #2254f5;
      }
    }
  }


  .eight-directory-area {
    background-image: url("../../../assets/images/activity/icon_share.png");
    &.selected {
      background-image: url("../../../assets/images/activity/icon_share_active.png");
      .directory-title {
        color: #2254f5;
      }
    }
  }
}

.function-area {
  flex: 1;
  height: 100%;
  overflow-y: hidden;
  padding-right: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .activity-scroll-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: scroll;
    padding-bottom: 200px;
  }

  .activity-bottom {
    height: 70px;
    float: bottom;
    display: flex;

    .activity-bottom-left {
      width: 30%;
      height: 70px;
      text-align: center;
      align-content: center;
      .left-button {
        width: 120px;
        height: 35px;
        border-radius: 5px;
      }
    }

    .activity-bottom-center {
      width: 30%;
      height: 70px;
      text-align: center;
      align-content: center;
      .center-button {
        width: 120px;
        height: 35px;
        border-radius: 5px;
      }
    }

    .activity-bottom-right {
      width: 30%;
      height: 70px;
      text-align: center;
      align-content: center;

      .right-button {
        width: 120px;
        height: 35px;
        background-color: #2254f5;
        border-radius: 5px;
      }
    }
  }
}

.function-area::-webkit-scrollbar {
  display: none;
}

</style>
